<template>
    <el-dialog v-model="viewData.editPassword" title="修改密码" @closed="handleClosed" width="30%">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
            label-width="auto"
            label-suffix=" :"
            v-loading="viewData.loading"
        >
            <el-form-item label="原密码" prop="odlPassword">
                <el-input v-model="ruleForm.odlPassword" show-password type="passWord" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="ruleForm.newPassword" show-password type="passWord" />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="ruleForm.confirmPassword" show-password type="passWord" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { system } from '@/api'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
    modelValue: boolean
}>()
const viewData = ref({
    editPassword: false,
    loading: false,
})
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    odlPassword: '',
    newPassword: '',
    confirmPassword: '',
})

const emits = defineEmits(['update:modelValue'])

watch(
    () => props.modelValue,
    () => {
        viewData.value.editPassword = props.modelValue
    },
)

const handleClosed = () => {
    emits('update:modelValue', false)
    ruleFormRef.value?.clearValidate()
    ruleForm.confirmPassword = ''
    ruleForm.newPassword = ''
    ruleForm.odlPassword = ''
}

const rules = reactive<FormRules>({
    odlPassword: [{ required: true, message: '请填写原密码', trigger: 'blur' }],
    newPassword: [{ required: true, message: '请填写新密码', trigger: 'blur' }],
    confirmPassword: [{ required: true, message: '请确认新密码', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            if (ruleForm.newPassword !== ruleForm.confirmPassword) {
                ElMessage.error('两次输入密码不相同')
            } else {
                viewData.value.loading = true
                system.editUserInfo(0, ruleForm)
                viewData.value.loading = false
                ElMessage({
                    showClose: true,
                    message: '修改成功,请重新登录',
                    type: 'success',
                })
                router.push({ path: '/login' })
            }
        }
    })
}

const resetForm = () => {
    viewData.value.editPassword = false
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.buttons {
    text-align: right;
}
</style>
